<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <style>
        /* 整体页面样式 */
        body {
            /* 梦幻紫到浅蓝渐变背景 */
            background: linear-gradient(to bottom right, #8E2DE2, #4A00E0, #0077be); 
            font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            cursor: pointer; /* 将鼠标指针设置为手型，提示可点击 */
            transition: transform 0.5s ease; /* 添加过渡效果，用于点击时的动画 */
        }

        /* 当背景被点击时的样式 */
        body:active {
            transform: scale(0.98); /* 点击时背景缩小一点，产生点击反馈效果 */
        }

        /* 容器样式 */
      .container {
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，增加层次感 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
            padding: 40px;
            width: 400px;
        }

        /* 登录标题样式 */
      .login h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #0ca3d2; /* 标题颜色突出显示 */
        }

        /* 表单输入框样式 */
        form input[type="text"],
        form input[type="password"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: none;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
            color: #fff;
            outline: none;
        }

        /* 记住密码复选框样式 */
      .remember_me label {
            color: #fff;
        }

        /* 提交按钮样式 */
      .submit input[type="submit"] {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 5px;
            background-color: #0ca3d2;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 添加过渡效果，用于悬停变色 */
        }

        /* 提交按钮悬停样式 */
      .submit input[type="submit"]:hover {
            background-color: #0077be; /* 悬停时变为更深的蓝色 */
        }
    </style>
</head>
<body>
<section class="container">
    <div class="login">
        <h1>用户登录</h1>
        <form method="post">
            <p><input type="text" name="username" value="" placeholder="用户名"></p>
            <p><input type="password" name="password" value="" placeholder="密码"></p>
            <p class="remember_me">
                <label>
                    <input type="checkbox" name="remember_me" id="remember_me">
                    记住密码
                </label>
            </p>
            <p class="submit"><input type="submit" name="commit" value="登录"></p>
        </form>
    </div>
</section>
</body>
</html>